<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>th标签的使用</title>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
    <style>

        .content {
            margin-left: 15%;
            margin-right: 15%;
            background-color: #00F7DE;
            border-radius: 5px;
            width: auto;
        }

    </style>
</head>
<body>
<div class="content">
    <a th:href="@{/}">首页</a>
    <h1>一. th:text标签的使用</h1>
    <p th:text="我是简单的赋值操作"></p>

    <h1>二. ognl表达式使用</h1>
    <!--需要在url后面添加参数id=4-->
    <div th:if="${person} != null">
        <h2>2.1 使用ognl表达式获取后台对象的值</h2>
        <p th:text="${person.nameValue} + '的信息'"></p>
        <ul>
            <li th:text="${person.id}"></li>
            <li th:text="${person.old}"></li>
            <li th:text="${person.ekAddress}"></li>
        </ul>
        <hr/>
        <h2>2.2 在ognl表达式中调用java的方法</h2>
        <ul>
            <!--
            说明:
                1. stat存储着当前迭代的对象;
                    - index: 从0开始的角标;
                    - count: 元素的个数，从1开始
                    - size: 总元素个数
                    - current: 当前遍历到的元素
                    - even/odd: 返回是否为奇偶，boolean值
                    - first/last: 返回是否为第一或最后，boolean值
            -->
            <li th:each="address,stat : ${person.ekAddress.split(',')}" th:text="|${address} ${stat.index} ${stat.count}  ${stat.size}  ${stat.current} ${stat.even} ${stat.odd} ${stat.first} ${stat.last}|"></li>
        </ul>
        <hr/>
        <h2>2.3 使用th:if判断modal中的值是否有效或者进行格式化</h2>
        <p th:text="|${person.nameValue} 是 ${person.old >= 18 ? '成年人' : '未成年'}|"></p>
        <h3>2.3.1 使用th:switch和th:case进行多支选择</h3>
        <p th:switch="${person.id}">
            <span th:case="4">id为4</span>
            <span th:case="*">id不为4</span>
        </p>
    </div>
    <hr/>
    <h1>三. 使用内置对象格式化数据</h1>
    <h2>3.1 格式化时间</h2>
    <p th:text="${#dates.format(today,'yyyy-MM-dd HH:mm:ss')}"></p>
    <h2>3.2 格式化数字</h2>
    <div th:if="${person} != null">
        <p th:text="${#numbers.formatDecimal(person.id, 3, 3)}"></p>
    </div>
    <hr/>
    <h1>四. 在ognl表达式外部使用条件判断</h1>
    <!--
    说明:
        1. 支持的比较运算：>, <, >= and <= ，但是>, <不能直接使用，因为xml会解析为标签，要使用别名。
            - 可以使用的别名：gt (>), lt (<), ge (>=), le (<=), not (!). Also eq (==), neq/ne (!=).
    注意:
        1. ${}内部的是通过OGNL表达式引擎解析的，外部的才是通过Thymeleaf的引擎解析，因此运算符尽量放在${}外进行。
    -->
    <div th:if="${person} != null">
        <p th:text="${person.old} ge 18 ? '成年人' : '未成年人'"></p>
    </div>

    <hr/>
    <h1>五. 给a标签绑定url</h1>
    <a th:href="@{/}">首页</a>

    <hr/>
    <h1>六. 引入其他模板页面</h1>
    <!--
    说明:
        1. 引用指令为`th:include="thymeleaf/footer::home"`, 其中`thymeleaf/footer`是对应模板的页面, 而`home`相当于是一个id选择
        器.
            - 作用是会将对应页面对应id的模板应用到本页面.
    注意:
        1. 被引用的页面可以直接使用本界面的modal对象中的值, 但是一般模板是为了提取公共语法, 所以不应该在模板中使用某个页面的对象, 除非
        这个对象所有应用这个模板的页面都有.
    -->
    <div class="container" th:include="thymeleaf/footer::home">
        <p>查看是否会替换掉这个</p>
    </div>
</div>
</body>
<script src="/static/jquery-3.4.1.js"></script>
<script th:inline="javascript">

    $(function () {
        dataInit();
    });
    
    function dataInit() {
        const person = [[${person}]];
        console.log(person);
    }

</script>
</html>